<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人资料 | 机械配件商城</title>
    <link rel="stylesheet" type="text/css" href="./../element-ui/index.css">
    <link rel="stylesheet" type="text/css" href="./../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../components/admin-frame.css"/>
    <link rel="stylesheet" type="text/css" href="./../components/min-width-container.css"/>
    <style>
        #app {
            height: 100%;
        }

    </style>
</head>
<body>
<div id="app">
    <admin-frame active="7" title="个人资料">
        <min-width-container>
            <div>
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-form-item label="用户名:">
                        <el-input size="mini" v-model="form.account" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:" prop="name">
                        <el-input size="mini" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别:">
                        <el-radio size="mini" v-model="form.sex" label="0">保密</el-radio>
                        <el-radio size="mini" v-model="form.sex" label="1">男</el-radio>
                        <el-radio size="mini" v-model="form.sex" label="2">女</el-radio>
                    </el-form-item>
                    <el-form-item label="密保问题:">
                        <el-input size="mini" v-model="form.question"></el-input>
                    </el-form-item>
                    <el-form-item label="答案:">
                        <el-input size="mini" v-model="form.asw" placeholder="答案不予显示"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄:" prop="age">
                        <el-input size="mini" v-model="form.age"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号:" prop="mobile">
                        <el-input size="mini" v-model="form.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱:" prop="email">
                        <el-input size="mini" v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" @click="save_info">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </min-width-container>
    </admin-frame>
</div>
<script src="./../js/vue.js"></script>
<script src="./../js/axios.min.js"></script>
<script src="./../element-ui/index.js"></script>
<script src="../components/admin-frame.js"></script>
<script src="./../components/min-width-container.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data() {
            return {
                addr_id: '',
                form: {
                    account: 'zhangsan',
                    name: '张三',
                    question: '',
                    asw: '',
                    sex: '0',
                    age: '35',
                    mobile: '15501080803',
                    email: '261300@qq.com',
                },
                rules: {
                    name: [
                        {
                            validator: (rule, value, callback) => {
                                if (value.length > 5) {
                                    callback(new Error("不能超过5个字符"))
                                } else {
                                    callback()
                                }
                            }, trigger: 'blur'
                        }
                    ],
                    age: [
                        {
                            validator: (rule, value, callback) => {
                                if (/^\d{1,2}$/.test(value)) {
                                    callback()
                                } else {
                                    callback(new Error("请输入正确的年龄"))
                                }
                            }, trigger: 'blur'
                        }
                    ],
                    mobile: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === "" || /^1\d{10}$/.test(value)) {
                                    callback()
                                } else {
                                    callback(new Error("请输入正确的手机号"))
                                }
                            }, trigger: 'blur'
                        }
                    ],
                    email: [
                        {
                            validator: (rule, value, callback) => {
                                if (value === "" || /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(value)) {
                                    callback()
                                } else {
                                    callback(new Error("请输入正确的电子邮箱"))
                                }
                            }, trigger: 'blur'
                        }
                    ],
                },
            };
        },
        created() {
            this.load_info();
        },
        methods: {
            load_info() {
                //加载用户的个人资料
                axios.post("/user/getuserinfo.do").then(response => {
                    if (response.data.status === 0) {
                        const user = response.data.data;
                        if (user !== undefined) {
                            this.form.account = user.account;
                            this.form.name = user.name;
                            this.form.sex = user.sex + '';
                            this.form.question = user.question;
                            this.form.asw = user.asw;
                            this.form.age = user.age;
                            this.form.mobile = user.phone;
                            this.form.email = user.email;
                        }
                    } else {
                        if (response.data.msg) {
                            console.log(response.data.msg);
                        }
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            save_info() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        const params = new URLSearchParams();
                        params.append("name", this.form.name);
                        params.append("email", this.form.email);
                        params.append("phone", this.form.mobile);
                        params.append("question", this.form.question);
                        params.append("asw", this.form.asw);
                        params.append("age", this.form.age);
                        params.append("sex", this.form.sex);
                        axios.post("/user/updateuserinfo.do", params).then(response => {
                            if (response.data.status === 0) {
                                this.$message({
                                    message: "更新成功",
                                    type: "success"
                                });
                            } else {
                                if (response.data.msg) {
                                    this.$message.error(response.data.msg);
                                }
                            }
                        }).catch(err => {
                            console.log(err);
                            this.$message.error("连接服务器异常");
                        });
                    }
                });
            }
        }
    });

</script>
</body>
</html>
